<template>
  <div class="page-content">
    <MenuBar v-if="!isMobile" passTab="41" />

    <PhoneMenuBar v-else passTab="41" />

    <div style="height: 70px;"></div>

    <div class="page-product">
      <div class="product-title">批发公告</div>

      <div v-html="htmlContent"></div>

    </div>

    <BottomBar />
  </div>
</template>

<script setup name="productListPage">
import { Create } from '@vicons/ionicons5'
import { API_URL } from '@/config'
import { navbarMenuInfo } from '@/api'
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import MenuBar from '@/components/MenuBar.vue'
import PhoneMenuBar from '@/components/PhoneMenuBar.vue'
import BottomBar from '@/components/BottomBar.vue'
// 创建一个响应式变量来存储是否为移动设备
const isMobile = ref(false);

// 定义一个函数来检查用户代理
const checkDevice = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // 设置isMobile的值
  isMobile.value = /android/i.test(userAgent) || /iPhone|iPad|iPod/i.test(userAgent);
};





const route = useRoute()

onMounted(async () => {
  checkDevice();

  getInfo()
});

const htmlContent = ref("")
const getInfo = async () => {
  const params = {
    id: 41,
  }
  const result = await navbarMenuInfo(params)
  console.log("result", result.data.content)
  htmlContent.value = result.data.content
}

</script>

<style scoped lang="scss">
/* 容器样式 */
.page-content {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;


  @media (min-width: 769px) {
    .page-product {
      padding: 15px 10%;
      flex: 1;

      .product-title {
        color: #111111;
        font-size: 30px;
        font-weight: bold;
        line-height: 140%;
        margin-bottom: 15px;
      }

    }
  }



  /* 手机端样式 */
  @media (max-width: 768px) {
    .page-product {
      padding: 15px;
      margin-top: 70px;


      .product-title {
        color: #111111;
        font-size: 18px;
        font-weight: bold;
        // margin-bottom: 15px;
      }
    }
  }






}
</style>